<template>
    <div class="de">
        <h3>根组件1</h3>
        <p>从 vue x 中获取值 : {{ count  }}</p>
        <button @click="handleAdd(1)">值 + 1</button>
        <button @click="handleAdd(2)">值 + 2</button>
        <button @click="handleAdd(5)">值 + 5</button>
        <button @click="handle">1秒之后修改值为666</button>
    </div>
</template>
<style>
.de{
    width: 300px;
    height: 200px;
    border: 1px solid rgb(108, 107, 105);
    text-align: center;
    margin-left: 20px;
}
</style>
<script>
import { mapState } from 'vuex';

export default {
computed :{
    ...mapState(['count','title']),
    
},
methods :{
    handleAdd(n){
        //需要提交 mutations 函数
        this.$store.commit('changeCount',n)
    },
    handle(){
       // 调用 actions 
       //this.$store.dispatch('action名字',额外参数)
       this.$store.dispatch('changeCountAction',666)
    }
}
}
</script>
